<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆WebKeepass</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static 'login.css' %}" />
</head>
<body>
    <div class="container">
        <div class="col-md-4 col-md-offset-4">
            <form class="form-login" action="/login/" method="post">
                {% if message %}
                    <div class="alert alert-warning" role="alert">{{ message }}</div>
                {% endif %}

                {% csrf_token %}
                <h2 class="text-center">WebKeepass</h2>
                <div class="form-group">
                    <label for="id_username">用户名：</label>
                    <input type="text" name="username" class="form-control" id="id_username" placeholder="Username" autofocus required>
                    <input type="password" name="password" class="form-control" id="id_password" placeholder="Password" required>
                </div>
                <button type="reset" class="btn btn-default pull-left">重置</button>
                <button type="button" id="submit-button" class="btn btn-success pull-right">登陆</button>
            </form>
            <div class="modal fade" id="verifModal" tabindex="-1" role="dialog" aria-labelledby="fieldsModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">MFA验证码</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div method="post" id="editItemGroupForm">
                            {% csrf_token %}
                            <div class="form-group" id="add-fields">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div><input type="text" id="id_verfiy" autofocus  maxlength="64" class="form-control"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  id="verfiySubmit">提交</button>
                    </div>
                </div>
            </div>

        </div>

        </div>
    </div>
    <script src="{%  static 'plugins/jQuery/jquery-2.2.3.min.js' %}" ></script>
    <script src="{%  static 'bootstrap/js/bootstrap.min.js' %}" ></script>
    <script>
        $(document).ready(function () {

            $('#id_password').bind('keypress', function (e) {
                if (e.keyCode == 13) {
                    $('#id_verfiy').val = ""
                    $('#verifModal').modal("show");
                }
            });

            $('#submit-button').click(function () {
                $('#verifModal').modal("show"); //打开模态框
             });

            $("#id_verfiy").bind('keypress', function (e) {
                if (e.keyCode == 13) {
                    loginSubmit();
                }
            });

            $('#verfiySubmit').click(function () {
                loginSubmit();
            });
        });

        function loginSubmit() {
                var username = $('#id_username').val();
                var password = $('#id_password').val();
                var verfiy = $("#id_verfiy").val();
                if (username != null && password != null && verfiy != null) {
                    $.ajax({
                        url: "{% url 'login' %}",
                        type: 'post',
                        data: {"username": username, "password": password, "verfiy": verfiy},
                        success: function(ret) {
                          window.location.href = {% url 'dashboard:group' %};
                        },
                        error: function (ret) {
                            alert("登录失败"+ret.responseJSON.msg);
                        }
                    });
                } else {
                    alert("输入出错")
                }
        }

    </script>

</body>
</html>
